<template>
  <div class="login">
    <loginBackground></loginBackground>
    <Form ref="formInline" :model="formInline" :rules="ruleInline">
      <FormItem prop="user">
        <Input type="text" v-model="formInline.user" placeholder="Username">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="formInline.password" placeholder="Password">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="verifycode">
        <div style="display:inline-flex">
          <Input type="text" class="verifycode" v-model="formInline.verifycode" placeholder="验证码">
            <Icon type="ios-infinite-outline" slot="prepend"></Icon>
          </Input>
          <img :src="verifycodeUrl" class="verify_img" @click="changeVerifycode()">
        </div>
      </FormItem>
      <FormItem>
        <Button type="primary" style="width: 50%" @click="handleSubmit('formInline')">Signin</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import loginBackground from "@/components/login-background.vue";
import qs from "qs";
import axios from "@/assets/api/axios";

export default {
  name: "login",
  data() {
    return {
      login: this.$store.state.login,
      verifycodeUrl: null,
      formInline: {
        user: "",
        password: "",
        verifycode: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        verifycode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.changeVerifycode();
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeVerifycode: function() {
      this.verifycodeUrl =
        "http://localhost:3000/verify?" + new Date().getTime();
    },
    handleSubmit(name) {
      axios({
        method: "post",
        url: "/blog/login",
        data: qs.stringify({
          user: this.formInline.user,
          password: this.formInline.password,
          verifycode: this.formInline.verifycode
        })
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    getData: function() {
      axios({
        method: "get",
        url: "/blog/login"
      })
        .then(res => {
          this.message = res.data.message;
        })
        .catch(err => {
          console.log(err);
        });
    },
    startLogin: function() {
      axios({
        method: "post",
        url: "/blog/login",
        data: qs.stringify({
          user: this.name,
          password: this.password
        })
      })
        .then(res => {
          // console.log(res.data);
          this.message = res.data.message;
          this.login = res.data.login;
          this.islogin();
        })
        .catch(err => {
          console.log(err);
        });
    },
    islogin: function() {
      if (this.login) {
        this.$store.commit("changeLogin");
        this.$router.push("/blog");
      }
    }
  },
  components: {
    loginBackground
  }
};
</script>

<style scoped>
.login form {
  /* background-color: rgba(117, 97, 97, 0.1); */
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -160px;
  margin-top: -200px;
}
.login form .verifycode {
  width: 60%;
}
.login form .verify_img {
  width: 50%;
  height: 36px;
  margin-left: 15px;
  border-radius: 3px;
  background-color: #fff;
  overflow: hidden;
}
.login form .verify_img:hover {
  cursor: pointer;
}
</style>